<template>
  <div id="assignMenuPage">
    <!-- 使用麵包屑組件 -->
    <BreadcrumbComponent :breadcrumbItems="breadcrumbItems" />
    <!-- 角色簡要信息面板 -->
    <div class="info-card">
      <a-card title="角色信息">
        <a-descriptions :column="2">
          <a-descriptions-item label="角色ID">{{
            roleDetail.id
          }}</a-descriptions-item>
          <a-descriptions-item label="角色名稱">{{
            roleDetail.name
          }}</a-descriptions-item>
        </a-descriptions>
      </a-card>
    </div>
    <!-- 二級菜單樹結構面板 -->
    <div class="menu-card">
      <a-card title="分配菜單" :loading="loading">
        <!-- 確保 treeData 有數據後再渲染 a-tree -->
        <a-tree
          v-if="treeData.length > 0"
          v-model:checkedKeys="checkedKeys"
          checkable
          defaultExpandAll
          :tree-data="treeData"
          :field-names="fieldNames"
        >
        </a-tree>
        <div class="button-container">
          <a-button type="primary" @click="handleSubmit">提交</a-button>
        </div>
      </a-card>
    </div>
    <BackButton />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import type { TreeProps } from "ant-design-vue";
import { message } from "ant-design-vue";
import { roleApi } from "@/api";
import { useRoute } from "vue-router";
import { useMenuStore } from "@/store/menuStore";
import BreadcrumbComponent from "@/components/BreadcrumbComponent.vue";
import BackButton from "@/components/BackButton.vue";

const route = useRoute();
const roleDetail = ref({ id: 0, name: "" }); // 角色詳情數據
const fieldNames: TreeProps["fieldNames"] = {
  key: "id",
  // title: 'title',
};
const checkedKeys = ref<number[]>([]); // 選中的菜單項的key，文字前面有勾子

const menuStore = useMenuStore();
const treeData = ref<TreeProps["treeData"]>(menuStore.menuTree);

const breadcrumbItems = [
  { url: "/role", name: "角色管理" },
  { url: "", name: "分配菜單" },
];

const loading = ref(false);
onMounted(async () => {
  loading.value = true;
  try {
    const roleId = Number(route.params.id);
    fetchRoleDetail(roleId);
    if (menuStore.menuTree.length === 0) {
      await menuStore.fetchMenuTree();
      treeData.value = menuStore.menuTree;
    }
    await fetchcheckedIdsData(roleId);
  } finally {
    loading.value = false;
  }
});

const fetchRoleDetail = async (roleId: number) => {
  try {
    const { data } = await roleApi.getRoleDetail(roleId);
    roleDetail.value = data;
  } catch (error) {
    console.error("獲取角色詳情失敗", error);
  }
};

const fetchcheckedIdsData = async (roleId: number) => {
  try {
    const { data } = await roleApi.getRoleMenuIds(roleId);
    checkedKeys.value = data;
  } catch (error) {
    console.error("獲取已分配菜單失敗", error);
  }
};

// 處理提交表單的方法
const handleSubmit = async () => {
  console.log("提交的菜單數據：", checkedKeys.value);
  // 這裡可以添加實際的提交邏輯，例如發送請求到後端
  const roleId = Number(route.params.id);
  const params = {
    menu_ids: checkedKeys.value,
  };
  try {
    await roleApi.assignRoleMenus(roleId, params);
    message.success("分配菜單成功");
  } catch (error) {
    console.error("分配菜單失敗", error);
  }
};
</script>

<style scoped>
/* 角色信息卡片樣式 */
.info-card {
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 分配菜單卡片樣式 */
.menu-card {
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.button-container {
  text-align: right;
  margin-top: 16px;
}
</style>
